<template>
  <div class="resume">
    <main>
      <p class="update-time">最后更新时间： {{newTime}}</p>
      <div class="personal-info">
        <div v-if="!modifyPersonInfo">
          <p class="name">{{ personInfo.name }}</p>
          <p class="desc">
            <span class="icon person-state"></span>
            {{ getExpName(personInfo.status) }}<i class="inline"></i>
            <span class="icon edubg"></span>
            {{ getEduName(personInfo.edubg) }}学历<i class="inline"></i>
            <span class="icon job-status"></span>
            {{ getJobStatusName(personInfo.jobStatus) }}
          </p>
          <p class="desc">
            <span class="icon tel"></span>{{ personInfo.tel }}
          </p>
          <div class="thumb-container">
            <img class="thumb" :src="thumbUrl"/>
            <div class="upload-layer">
              <a @click="showImgUpload = !showImgUpload" class="upload-trigger"></a>
            </div>
          </div>
          <ImgUpload
            @crop-success="cropSuccess"
            @crop-upload-success="cropUploadSuccess"
            @crop-upload-fail="cropUploadFail"
            :url="url"
            :params="params"
            :headers="headers"
            v-model="showImgUpload">
          </ImgUpload>
        </div>
        <span
          v-if="!modifyPersonInfo"
          class="text-btn"
          style="top:-35px;left:-20px"
          @click="modifyPersonInfoInit">编辑</span>
        <div class="form-container" v-if="modifyPersonInfo">
          <p class="form-title">编辑我的信息</p>
            <form class="horizontal">
              <div class="row">
                <div class="form-item">
                  <label>姓名</label>
                  <input type="text" v-model="personInfoTemp.name">
                </div>
                <div class="form-item">
                  <label>工作经验</label>
                  <Select
                    width="356.33px"
                    :value="personInfoTemp.status"
                    placeholder="什么时候开始求职"
                    @on-change="$set(personInfoTemp, 'status', $event)">
                    <Option
                      v-for="option of [{key:'0',value:'应届生'},
                      {key:'1', value:'工作1年'},
                      {key:'2',value:'工作2年'},
                      {key:'3',value:'工作5年'},
                      {key:'4',value: '工作10年以上'}]"
                      :key="option.key"
                      :value="option.key"
                      :label="option.value"
                    >{{ option.value }}</Option>
                  </Select>
                </div>
              </div>
              <div class="row">
                <div class="form-item">
                  <label>性别</label>
                  <div
                    class="checkbox-box"
                    @click="setGender(0)"
                    :class="{ chosen: personInfoTemp.gender === 0 }">男</div>
                  <div
                    class="checkbox-box"
                    @click="setGender(1)"
                    :class="{ chosen: personInfoTemp.gender === 1 }">女</div>
                </div>
                <div class="form-item">
                  <label>当前求职状态</label>
                  <Select
                    width="356.33px"
                    :value="personInfoTemp.jobStatus"
                    placeholder="打算什么时候开始工作"
                    @on-change="$set(personInfoTemp, 'jobStatus', $event)">
                    <Option
                      v-for="option of [
                        {key:'0',value:'在职-考虑机会'},
                        {key:'1',value:'在职-月内到岗'},
                        {key:'2',value:'离职-随时到岗'},
                      ]"
                      :key="option.key"
                      :value="option.key"
                      :label="option.value"
                    >{{ option.value }}</Option>
                  </Select>
                </div>
              </div>
              <div class="row">
                <div class="form-item">
                  <label>年龄</label>
                  <input type="text" v-model="personInfoTemp.age">
                </div>
                <div class="form-item">
                  <label>邮箱</label>
                  <input type="text" v-model="personInfoTemp.email">
                </div>
              </div>
              <div class="row">
                <div class="form-item">
                  <label>手机号</label>
                  <input disabled style="width:356.33px" type="text" v-model="personInfoTemp.tel">
                </div>
                <div class="form-item">
                  <label>学历</label>
                  <Select
                    width="356.33px"
                    :value="personInfoTemp.edubg"
                    placeholder="您是什么学历"
                    @on-change="$set(personInfoTemp, 'edubg', $event)">
                    <Option
                      v-for="option of [{key:'0',value:'小学'},
                      {key:'1', value:'初中'},
                      {key:'2',value:'高中'},
                      {key:'3',value:'专科'},
                      {key:'4',value: '本科'},
                      {key:'5',value: '研究生'},
                      {key:'6',value:'博士'}]"
                      :key="option.key"
                      :value="option.key"
                      :label="option.value"
                    >{{ option.value }}</Option>
                  </Select>
                </div>
              </div>
            </form>
          <footer>
            <!-- TODO 取消时询问是否确定 -->
            <div class="btn default" @click="modifyPersonInfo = false">取消</div>
            <div class="btn primary" @click="savePersonInfo">保存</div>
          </footer>
        </div>
      </div>
      <div class="self-intro">
        <p class="title" v-if="!modifySelfIntro">自我介绍</p>
        <div style="transition:all .5s ease">
          <div
            class="self-intro-container"
            v-if="!modifySelfIntro"
            @click="modifySelfIntroInit"
            v-html="personInfo.selfIntro">
          </div>
        </div>

        <div class="form-container" v-if="modifySelfIntro">
          <p class="form-title">编辑自我介绍</p>
            <quill-editor
              class="editor"
              :content="personInfo.selfIntro"
              :options="editorConfig1"
              @change="onSelfIntroChange($event)"
            ></quill-editor>
          <footer>
            <div class="btn default" @click="modifySelfIntro = false">取消</div>
            <div class="btn primary" @click="saveSelfIntro">保存</div>
          </footer>
        </div>
      </div>
      <div class="desire-job">
        <p class="title" v-if="!modifyDesireJob">
          期望职位<span class="text-btn" @click="modifyDesireJobInit(null)">添加</span>
        </p>
        <div v-if="!modifyDesireJob" style="transition:all .5s ease">
          <div
            class="desc"
            v-for="job of personInfo.jobDesire"
            @click="modifyDesireJobInit(job)"
            :key="job.id">
            <span class="icon bulb"></span>{{ getJobTypeName(job.job) }}<i class="inline"></i>
            <span class="icon salary"></span>
            {{ job.minSalary }} - {{ job.maxSalary }}<i class="inline"></i>
            <span class="icon location"></span>{{ getCityName(job.location) }}
            <div class="delete" @click.stop="deleteDesireJob(job)">删除</div>
          </div>
        </div>
        <div class="form-container" v-if="modifyDesireJob">
          <p class="form-title">{{ jobTemp.id ? '编辑期望职位' : '添加期望职位' }}</p>
          <form class="horizontal">
            <div class="row">
              <div class="form-item">
                <label>期望职位</label>
                <Select
                  width="356.33px"
                  :value="jobTemp.job"
                  placeholder="想找什么工作"
                  @on-change="$set(jobTemp, 'job', $event)">
                  <Option
                    v-for="option of workTypeList"
                    :key="option.key"
                    :value="option.key"
                    :label="option.value"
                  >{{ option.value }}</Option>
                </Select>
              </div>
              <div class="form-item">
                <label>地点</label>
                <Select
                  width="356.33px"
                  :value="jobTemp.location"
                  placeholder="想在哪工作"
                  @on-change="$set(jobTemp, 'location', $event)">
                  <Option
                    v-for="option of cityList"
                    :key="option.key"
                    :value="option.key"
                    :label="option.value"
                  >{{ option.value }}</Option>
                </Select>
              </div>
            </div>
            <div class="row">
              <div class="form-item">
                <label>最高薪资</label>
                <input type="text" v-model="jobTemp.maxSalary">
              </div>
              <div class="form-item">
                <label>最低薪资</label>
                <input type="text" v-model="jobTemp.minSalary">
              </div>
            </div>
          </form>
          <footer style="padding-right:40px">
            <div class="btn default" @click="cancelModify(0)">取消</div>
            <div class="btn primary" @click="safeDesireJob">保存</div>
          </footer>
        </div>
      </div>
      <div class="education">
        <p class="title" v-if="!modifyEduExp">
          教育经历<span class="text-btn" @click="modifyEduExpInit(null)">添加</span>
        </p>
        <div class="edu-container" v-if="!modifyEduExp">
          <div
            class="edu"
            v-for="exp of personInfo.eduExp"
            @click="modifyEduExpInit(exp)"
            :key="exp.id">
            <p class="edu-name">
              {{ exp.name }}
            </p>
            <div
              v-if="personInfo.eduExp.length > 1"
              class="delete"
              @click.stop="deleteEduExp(exp)">删除</div>
            <p><span class="date">{{ exp.start }} - {{ exp.end }}</span></p>
            <p class="edu-desc">
              {{ exp.major }}
              <i class="inline" v-if="exp.major"></i>
              {{ getEduName(exp.edubg) }}
            </p>
          </div>
        </div>
        <div class="form-container" v-if="modifyEduExp">
          <p class="form-title">{{ eduExpTemp.id ? '编辑教育经历' : '添加教育经历' }}</p>
          <form class="horizontal">
            <div class="row">
              <div class="form-item">
                <label>院校名称</label>
                <input type="text" v-model="eduExpTemp.name">
              </div>
              <div class="form-item"></div>
            </div>
            <div class="row">
              <div class="form-item">
                <label>学历</label>
                <Select
                  width="356.33px"
                  :value="eduExpTemp.edubg"
                  placeholder="学历"
                  @on-change="$set(eduExpTemp, 'edubg', $event)">
                  <Option
                    v-for="option of [{key: '0',value: '小学'},
                    {key: '1',value: '初中'},
                    {key: '2',value: '高中'},
                    {key: '3',value: '专科'},
                    {key: '4',value: '本科'},
                    {key: '5',value: '研究生'},
                    {key: '6',value: '博士'}]"
                    :key="option.key"
                    :value="option.key"
                    :label="option.value"
                  >{{ option.value }}</Option>
                </Select>
              </div>
              <div class="form-item" v-if="parseInt(eduExpTemp.edubg) > 2">
                <label>专业名称</label>
                <Select
                  width="356.33px"
                  :value="eduExpTemp.major"
                  placeholder="你的专业"
                  @on-change="$set(eduExpTemp, 'major', $event)">
                  <Option
                    v-for="option of ['软件工程', '硬件工程', '环境工程', '有机化学', '商务英语', '自动化', '计算机技术与工程', '模具制造', '通信', '国际金融', '酒店管理']"
                    :key="option"
                    :value="option"
                    :label="option"
                  >{{ option }}</Option>
                </Select>
              </div>
            </div>
            <div class="row">
              <div class="form-item">
                <label>时间段</label>
                <date-picker
                  :single-input="true"
                  v-model="eduExpTemp.start"
                  @change="$set(eduExpTemp, 'start', new Date($event))"
                  width="90%"></date-picker>
              </div>
              <span class="separator">至</span>
              <div class="form-item">
                <label style="height:22px"></label>
                <date-picker
                  :single-input="true"
                  v-model="eduExpTemp.end"
                  @change="$set(eduExpTemp, 'end', new Date($event))"
                  width="90%"></date-picker>
              </div>
            </div>
          </form>
          <footer style="padding-right:40px">
            <div class="btn default"  @click="cancelModify(1)">取消</div>
            <div class="btn primary" @click="saveEduExp">保存</div>
          </footer>
        </div>
      </div>
      <div class="project-exp">
        <p class="title" v-if="!modifyProjectExp">
          项目经历<span class="text-btn" @click="modifyProjInit(null)">添加</span>
        </p>
        <div
          class="project-exp-container"
          v-show="!modifyProjectExp">
          <div
            class="proj"
            v-for="proj of personInfo.projExp"
            :key="proj.id"
            @click="modifyProjInit(proj)">
            <p class="proj-name">{{ proj.name }}</p>
            <div class="delete" @click.stop="deleteProjExp(proj)">删除</div>
            <p>
              <span class="date">{{ proj.start }} 至 {{ proj.end }}</span>
            </p>
            <p class="role">
              {{ proj.companyName || '个人项目' }}<i class="inline"></i>{{ proj.role }}
            </p>
            <div class="proj-desc content" v-html="proj.desc" v-if="proj.desc"></div>
            <div class="proj-desc result" v-html="proj.res" v-if="proj.res"></div>
          </div>
        </div>
        <div class="form-container" v-if="modifyProjectExp">
          <p class="form-title">{{ projTemp.id ? '编辑项目经验' : '添加项目经验' }}</p>
          <form class="horizontal">
            <div class="row">
              <div class="form-item">
                <label>项目名称</label>
                <input type="text" v-model="projTemp.name">
              </div>
              <div class="form-item">
                <label>项目角色</label>
                <input type="text" v-model="projTemp.role">
              </div>
            </div>
            <div class="row">
              <div class="form-item">
                <label>项目时间</label>
                <date-picker
                  :single-input="true"
                  v-model="projTemp.start"
                  @change="$set(projTemp, 'start', new Date($event))"
                  width="90%"></date-picker>
              </div>
              <span class="separator">至</span>
              <div class="form-item">
                <label style="height:22px"></label>
                <date-picker
                  :single-input="true"
                  v-model="projTemp.end"
                  @change="$set(projTemp, 'end', new Date($event))"
                  width="90%"></date-picker>
              </div>
            </div>
            <div class="row">
              <div class="form-item">
                <label>项目归属</label>
                <Select
                  width="356.33px"
                  :value="projTemp.belong"
                  placeholder="个人或公司"
                  @on-change="$set(projTemp, 'belong', $event)">
                  <Option
                    v-for="option of [0, 1]"
                    :key="option"
                    :value="option"
                    :label="option === 0 ? '个人' : '公司'"
                  >{{ option === 0 ? '个人' : '公司' }}</Option>
                </Select>
              </div>
              <div class="form-item" v-show="projTemp.belong == 1">
                <label>公司名称</label>
                <input type="text" v-model="projTemp.companyName">
              </div>
            </div>
            <div class="text-container">
              <p>项目描述</p>
                <quill-editor
                  class="editor"
                  :content="projTemp.desc"
                  :options="editorConfig2"
                  @change="onProjDescChange($event)"
                ></quill-editor>
            </div>
            <div class="text-container">
              <p>项目成果</p>
              <quill-editor
                class="editor"
                :content="projTemp.res"
                :options="editorConfig3"
                @change="onProjResChange($event)">
              </quill-editor>
            </div>
          </form>
          <footer style="padding-right:40px">
            <div class="btn default" @click="cancelModify(2)">取消</div>
            <div class="btn primary" @click="saveProj">保存</div>
          </footer>
        </div>
      </div>
    </main>
    <aside>
      <div class="resume">
        <p>简历附件</p>
        <ul>
          <li  v-if="personInfo.filename">
            <span style="flex:1">
              <img src="https://static.zhipin.com/zhipin/v144/web/geek/images/icon-file.png">
              {{personInfo.filename}}
            </span>
            <span class="delete" @click="delFile">删除</span>
          </li>
        </ul>
        <label>
          <div class="btn primary">上传简历附件</div>
          <input
            ref="resume"
            @change="uploadResume"
            type="file"
            accept=".doc,.docx,.pdf"
            style="display:none">
        </label>
      </div>
    </aside>
  </div>
</template>
<script>
/* eslint-disable */
import { quillEditor } from 'vue-quill-editor';
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import DatePicker from '@/components/Date/index';
import ImgUpload from 'vue-image-crop-upload';
import api from '@/api/resume'
import nginx from '@/assets/nginxconfig';

async function getInfo() {
  const params = new URLSearchParams();
  let personInfo = null;
  let thumbUrl = null;
  let cityList = [];
  let workTypeList = [];
  const cityRes = await api.getCityApi(params);
  const jobRes = await api.getAllTypeApi(params);
  const datas1 = jobRes.data.data;
  for (let i = 0; i < datas1.length; i += 1) {
    workTypeList.push(
      {
        key: datas1[i].businessId,
        value: datas1[i].name,
      },
    );
  }
  const datas2 = cityRes.data.data;
  for (let i = 0; i < datas2.length; i += 1) {
    cityList.push(
      {
        key: datas2[i].businessId,
        value: datas2[i].name,
      },
    );
  }
  params.append('userId', sessionStorage.getItem("userId"));
  const response = await api.getUserInfoApi(params);
  if(response.data.code === 200) {
    let data = response.data.data;
    thumbUrl = nginx.nginxaddress + data.sysUser.remark;
    let bDirections = data.bdirections;
    let directionList = [];
    for(let i = 0 ; i < bDirections.length ; i+=1) {
      directionList.push(
        {
          id: bDirections[i].businessId,
          job: bDirections[i].jobType,
          minSalary: bDirections[i].minSalary,
          maxSalary: bDirections[i].maxSalary,
          location: bDirections[i].expectCity,
        },
      )
    }
    let bExperienceList = data.bexperienceList;
    let jobList = [];
    for(let i = 0 ; i < bExperienceList.length ; i+=1) {
      jobList.push(
        {
          id: bExperienceList[i].businessId,
          name:bExperienceList[i].experienceName,
          companyName: bExperienceList[i].remark,
          role: bExperienceList[i].play,
          start: bExperienceList[i].startTime.split(' ')[0],
          end: bExperienceList[i].endTime.split(' ')[0],
          desc:bExperienceList[i].description,
          res: bExperienceList[i].result,
        }
      )
    }
    let bEduBackgroundList = data.beduBackgroundList;
    let eduList = [];
    for(let i = 0 ; i < bEduBackgroundList.length ; i+=1) {
      eduList.push(
        {
          id: bEduBackgroundList[i].businessId,
          name: bEduBackgroundList[i].campusName,
          edubg: bEduBackgroundList[i].level,
          major: bEduBackgroundList[i].profession,
          start: bEduBackgroundList[i].startTime.split(' ')[0],
          end: bEduBackgroundList[i].endTime.split(' ')[0],
        }
      )
    }
    let fileId = '';
    let filename = '';
    if(data.bcandidateFile) {
      fileId = data.bcandidateFile.businessId;
      filename = data.bcandidateFile.filename;
    }
    personInfo = {
      fileId: fileId,
      filename: filename,
      id: data.sysUser.businessId,
      thumb: data.sysUser.remark,
      name: data.sysUser.realname,
      gender: parseInt(data.bcandidate.remark),
      age: data.sysUser.age,
      status: data.bcandidate.experience,
      edubg: data.bcandidate.educated,
      jobStatus: data.bcandidate.status,
      tel: data.sysUser.phone,
      email: data.sysUser.email,
      selfIntro: data.bcandidate.evaluate,
      jobDesire: directionList,
      projExp: jobList,
      eduExp: eduList,
    }
  }
  return [personInfo, thumbUrl, cityList, workTypeList];
}

export default {
  name: 'Resume',
  beforeRouteEnter(to, from, next) {
    getInfo().then((res) => {
      next((vm) => {
        vm.cityList = res[2];
        console.log(res[3]);
        vm.workTypeList = res[3];
        vm.personInfo = {
          ...res[0],
        }
        if(!res[0].name || res[0].gender == null || res[0].age == null) {
          const { name, status, edubg, jobStatus, tel, email, gender, age } = vm.personInfo;
          vm.personInfoTemp = { name, status, edubg, jobStatus, tel, email, gender, age };
          vm.modifyPersonInfo = true;
        }
        if (!res[0].selfIntro) {
          vm.modifySelfIntro = true;
        }
        if (res[0].jobDesire.length === 0) {
          vm.modifyDesireJob = true;
        }
        vm.thumbUrl = res[1];
        vm.getNewTime();
      })
    })
  },
  beforeRouteLeave(to, from, next) {
    if(this.personInfo.jobDesire.length === 0 
      || !this.personInfo.selfIntro
      || !this.personInfo.name
      || !this.personInfo.jobStatus
      || !this.personInfo.age
      || this.personInfo.gender === null
      || this.personInfo.status === null
      || !this.personInfo.tel
      || !this.personInfo.email) {
        console.log(this.personInfo.jobDesire.length,this.personInfo.selfIntro,this.personInfo.name,
        this.personInfo.exp,this.personInfo.jobStatus,this.personInfo.age,this.personInfo.gender,
        this.personInfo.status,this.personInfo.tel,this.personInfo.email)
        this.$alert('请补充个人信息');
        next(false);
        return;
      }
      next();
  },
  data() {
    return {
      fileName: '',
      // 头像上传接口
      url: 'http://123.206.41.36:8080/auth/uploadHeadPic',
      // 接口请求头
      headers: {},
      // key: value形式的参数
      params: {
        userId: sessionStorage.getItem("userId")
      },
      workTypeList: [],
      cityList: [],
      showImgUpload: false,
      modifyPersonInfo: false,
      modifySelfIntro: false,
      modifyDesireJob: false,
      modifyProjectExp: false,
      modifyEduExp: false,
      newTime: '',
      personInfo: {
      },

      editorConfig1: {
        placeholder: '例如：两年UI设计经验，熟悉IOS和Android的界面设计规范，对产品本色有独特见解，有一定的手冲经验',
        modules: {
          toolbar: [
            [{ list: 'ordered' }, { list: 'bullet' }],
          ],
        },
      },
      editorConfig2: {
        placeholder: '描述该项目，向boss展示你的项目经验。\n例如:\n1.项目分工...\n2.人员分工...\n3.我的责任...',
        modules: {
          toolbar: [
            [{ list: 'ordered' }, { list: 'bullet' }],
          ],
        },
      },
      editorConfig3: {
        placeholder: '描述你的项目成果，向简招者展示你的工作能力。\n例如:\n1.项目收益...\n2.我的贡献...\n3.我的收获...',
        modules: {
          toolbar: [
            [{ list: 'ordered' }, { list: 'bullet' }],
          ],
        },
      },

      thumbUrl: '/static/img/thumb1.a0e2b6e.jpg',
      personInfoTemp: {
        name: '',
        status: '',
        edubg: '',
        jobStatus: '',
        tel: '',
        email: '',
        gender: '',
        age: '',
      },
      selfIntroTemp: '',
      jobTemp: {
        job: '',
        location: '',
        maxSalary: '',
        minSalray: '',
      },
      eduExpTemp: {
        name: '',
        edubg: '',
        major: '',
        start: new Date(),
        end: new Date(),
      },
      projTemp: {
        name: '',
        companyName: '',
        start: new Date(),
        end: new Date(),
        role: '',
        belong: '',
        desc: '',
        res: '',
      },
    };
  },
  methods: {
    delFile() {
      this.$confirm('删除后不可复原，确定删除吗？', (res) => {
        if (res) {
          api.deleteFileApi(this.personInfo.fileId).then(async (res) => {
            if(res.data.code === 200) {
              this.$alert("删除成功");
              const res = await getInfo();
              this.personInfo = {
                ...res[0],
              }
            }
          });
        }
      });
    },
    // 头像裁剪
    cropSuccess(imgDataUrl) {
      this.thumbUrl = imgDataUrl;
      this.getNewTime();
    },
    // 头像上传成功
    cropUploadSuccess(res, field) {
      console.log(res.data);

      sessionStorage.setItem('thumb', nginx.nginxaddress + res.data);
      this.$store.dispatch('user/setThumb', nginx.nginxaddress + res.data);
    },
    // 头像上传失败
    cropUploadFail(status, field) {
    },

    setInit(code) {
      switch (code) {
        case 0:
          this.jobTemp = {
            job: '',
            location: '',
            salary: '',
          };
          break;
        case 1:
          this.eduExpTemp = {
            name: '',
            edubg: '',
            major: '',
            start: new Date(),
            end: new Date(),
          };
          break;
        case 2:
          this.projTemp = {
            name: '',
            companyName: '',
            start: new Date(),
            end: new Date(),
            role: '',
            belong: '',
            desc: '',
            res: '',
          };
          break;
        default:
          break;
      }
    },
    modifyPersonInfoInit() {
      if (this.modifySelfIntro
      || this.modifyDesireJob
      || this.modifyProjectExp
      || this.modifyEduExp) {
        this.$confirm('还有信息没有保存，确定要退出吗？', (res) => {
          if (res) {
            this.modifySelfIntro = false;
            this.modifyDesireJob = false;
            this.modifyEduExp = false;
            this.modifyProjectExp = false;
            this.setInit(0);
            this.setInit(1);
            this.setInit(2);
            const { name, status, edubg, jobStatus, tel, email, gender, age } = this.personInfo;
            this.personInfoTemp = { name, status, edubg, jobStatus, tel, email, gender, age };
            this.modifyPersonInfo = true;
          }
        });
      } else {
        const { name, status, edubg, jobStatus, tel, email, gender, age } = this.personInfo;
        this.personInfoTemp = { name, status, edubg, jobStatus, tel, email, gender, age };
        this.modifyPersonInfo = true;
      }
    },
    setGender(gender) {
      this.$set(this.personInfoTemp, 'gender', gender);
    },
    savePersonInfo() {
      const { name, status, edubg, jobStatus, tel, email, gender, age, edustatus} = this.personInfoTemp;
      const params = new URLSearchParams();
      params.append('realname', name);
      params.append('email', email);
      params.append('age', age);
      api.updateUserInfo1(sessionStorage.getItem("userId"), params).then(async (response) => {
        const params1 = new URLSearchParams();
        params1.append('experience', status);
        params1.append('educated', edubg);
        params1.append('status', jobStatus);
        params1.append('remark', gender);
        api.updateUserInfo2(sessionStorage.getItem("userId"), params1).then(async (res) => {
            if(res.data.code === 200) {
              this.$alert("保存成功");
              this.getNewTime();
              this.personInfo = {
                ...this.personInfo,
                name,
                status,
                edubg,
                jobStatus,
                tel,
                email,
                gender,
                age,
              };
              this.modifyPersonInfo = false;
            }
            else {
              this.$alert(res.data.message);
            }
        });
      });
    },

    saveSelfIntro() {
      // this.selfIntroTemp 是你要保存的东西
      const params1 = new URLSearchParams();
      params1.append('evaluate', this.selfIntroTemp);
      api.updateUserInfo2(sessionStorage.getItem("userId"), params1).then(async (res) => {
        if(res.data.code === 200) {
          this.$alert("保存成功");
          this.getNewTime();
          this.modifySelfIntro = false;
          this.personInfo.selfIntro = this.selfIntroTemp;
        }
        else {
          this.$alert(res.data.message);
        }
      });
    },
    modifySelfIntroInit() {
      if (this.modifyPersonInfo
      || this.modifyDesireJob
      || this.modifyProjectExp
      || this.modifyEduExp) {
        this.$confirm('还有信息没有保存，确定要退出吗？', (res) => {
          if (res) {
            this.modifyPersonInfo = false;
            this.modifyDesireJob = false;
            this.modifyEduExp = false;
            this.modifyProjectExp = false;
            this.setInit(0);
            this.setInit(1);
            this.setInit(2);
            this.selfIntroTemp = this.personInfo.selfIntro;
            this.modifySelfIntro = true;
          }
        });
      } else {
        this.selfIntroTemp = this.personInfo.selfIntro;
        this.modifySelfIntro = true;
      }
    },
    onSelfIntroChange({ html }) {
      this.selfIntroTemp = html;
    },

    modifyProjInit(proj) {
      if (this.modifyPersonInfo
      || this.modifyDesireJob
      || this.modifySelfIntro
      || this.modifyEduExp) {
        this.$confirm('还有信息没有保存，确定要退出吗？', (res) => {
          if (res) {
            this.modifyPersonInfo = false;
            this.modifyDesireJob = false;
            this.modifyEduExp = false;
            this.modifySelfIntro = false;
            this.setInit(0);
            this.setInit(1);
            if (proj) {
              this.projTemp = {
                ...proj,
                belong: proj.companyName ? 0 : 1,
                start: new Date(proj.start),
                end: new Date(proj.end),
              };
            }
            this.modifyProjectExp = true;
          }
        });
      } else {
        if (proj) {
          this.projTemp = {
            ...proj,
            belong: proj.companyName == null ? 0 : 1,
            start: new Date(proj.start),
            end: new Date(proj.end),
          };
        }
        this.modifyProjectExp = true;
      }
    },
    onProjDescChange({ html }) {
      this.projTemp.desc = html;
    },
    onProjResChange({ html }) {
      this.projTemp.res = html;
    },
    saveProj() {
      const { id, name, role, belong, desc, res } = this.projTemp;
      let { companyName, start, end } = this.projTemp;
      if (belong === 0) {
        companyName = '';
      }
      start = start.Format('yyyy-MM-dd HH:mm:ss');
      end = end.Format('yyyy-MM-dd HH:mm:ss');
      console.log(start, end);
      if(id) {
        const params = new URLSearchParams();
        params.append('experienceName', name);
        params.append('play', role);
        if(belong === 1) {
          params.append('remark', companyName);
        }
        params.append('description', desc);
        params.append('result', res);
        params.append('startString', start);
        params.append('endString', end);
        api.updateExpApi(id, params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("修改成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.modifyProjectExp = false;
            this.projTemp = {
              id: '',
              name: '',
              companyName: '',
              start: new Date(),
              end: new Date(),
              role: '',
              belong: '',
              desc: '',
              res: '',
            };
          }
        });
      }else {
        const params = new URLSearchParams();
        params.append('businessId', sessionStorage.getItem("userId"));
        params.append('experienceName', name);
        params.append('play', role);
        if(belong === 1) {
          params.append('remark', companyName);
        }
        params.append('description', desc);
        params.append('result', res);
        params.append('startString', start);
        params.append('endString', end);
        api.addExpApi(params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("添加成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.modifyProjectExp = false;
            this.projTemp = {
              id: '',
              name: '',
              companyName: '',
              start: new Date(),
              end: new Date(),
              role: '',
              belong: '',
              desc: '',
              res: '',
            };
          }
        });
      }
    },
    deleteProjExp({ id }) {
      this.$confirm('删除后不可复原，确定删除吗？', (res) => {
        if (res) {
          api.deleteExpApi(id).then(async (res) => {
            if(res.data.code === 200) {
              this.$alert("删除成功");
              const res = await getInfo();
              this.personInfo = {
                ...res[0],
              }
            }
          });
        }
      });
    },

    modifyDesireJobInit(job) {
      if (this.modifyPersonInfo
      || this.modifyProjectExp
      || this.modifySelfIntro
      || this.modifyEduExp) {
        this.$confirm('还有信息没有保存，确定要退出吗？', (res) => {
          if (res) {
            this.modifyPersonInfo = false;
            this.modifyProjectExp = false;
            this.modifyEduExp = false;
            this.modifySelfIntro = false;
            this.setInit(1);
            this.setInit(2);
            if (job) {
              this.jobTemp = { ...job };
            }
            this.modifyDesireJob = true;
          }
        });
      } else {
        if (job) {
          this.jobTemp = { ...job };
        }
        this.modifyDesireJob = true;
      }
    },
    deleteDesireJob({ id }) {
      this.$confirm('删除后不可复原，确定删除吗？', (res) => {
        if (res) {
          // TODO 删除期望职位
          api.deleteDerApi(id).then(async (res) => {
            if(res.data.code === 200) {
              this.$alert("删除成功");
              const res = await getInfo();
              this.personInfo = {
                ...res[0],
              }
            }
          });
        }
      });
    },
    safeDesireJob() {
      // this.jobTemp是你的数据
      // TODO 保存期望职位
      if(this.jobTemp.id) {
        const params = new URLSearchParams();
        params.append('jobType', this.jobTemp.job);
        params.append('minSalary', this.jobTemp.minSalary);
        params.append('maxSalary', this.jobTemp.maxSalary);
        params.append('expectCity', this.jobTemp.location);
        api.updateDerApi(this.jobTemp.id, params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("修改成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.thumbUrl = res[1];
            this.modifyDesireJob = false;
            this.eduExpTemp = {
              name: '',
              edubg: '',
              major: '',
              start: new Date(),
              end: new Date(),
            };
          }
        });
      }else {
        const params = new URLSearchParams();
        params.append('businessId', sessionStorage.getItem("userId"));
        params.append('jobType', this.jobTemp.job);
        params.append('minSalary', this.jobTemp.minSalary);
        params.append('maxSalary', this.jobTemp.maxSalary);
        params.append('expectCity', this.jobTemp.location);
        api.addDerApi(params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("添加成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.modifyDesireJob = false;
          }
        });
      }
    },

    modifyEduExpInit(exp) {
      if (this.modifyPersonInfo
      || this.modifyProjectExp
      || this.modifySelfIntro
      || this.modifyDesireJob) {
        this.$confirm('还有信息没有保存，确定要退出吗？', (res) => {
          if (res) {
            this.modifyPersonInfo = false;
            this.modifyProjectExp = false;
            this.modifyDesireJob = false;
            this.modifySelfIntro = false;
            this.setInit(0);
            this.setInit(2);
            if (exp) {
              this.eduExpTemp = {
                ...exp,
                start: new Date(exp.start),
                end: new Date(exp.end),
              };
            }
            this.modifyEduExp = true;
          }
        });
      } else {
        if (exp) {
          this.eduExpTemp = {
            ...exp,
            start: new Date(exp.start),
            end: new Date(exp.end),
          };
        }
        this.modifyEduExp = true;
      }
    },
    deleteEduExp({ id }) {
      this.$confirm('删除后不可复原，确定删除吗？', (res) => {
        if (res) {
          api.deleteEduApi(id).then(async (res) => {
            if(res.data.code === 200) {
              this.$alert("删除成功");
              const res = await getInfo();
              this.personInfo = {
                ...res[0],
              }
              this.thumbUrl = res[1];
            }
          });
        }
      });
    },
    saveEduExp() {
      const { id, name, edubg, major } = this.eduExpTemp;
      let { start, end } = this.eduExpTemp;

      start = start.Format('yyyy-MM-dd HH:mm:ss');
      end = end.Format('yyyy-MM-dd HH:mm:ss');
      if(id) {
        const params = new URLSearchParams();
        params.append('campusName', name);
        params.append('level', edubg);
        params.append('profession', major);
        params.append('startString', start);
        params.append('endString', end);
        api.updateEduApi(id, params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("修改成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.thumbUrl = res[1];
            this.modifyEduExp = false;
            this.eduExpTemp = {
              name: '',
              edubg: '',
              major: '',
              start: new Date(),
              end: new Date(),
            };
          }
        });
      }else {
        const params = new URLSearchParams();
        params.append('businessId', sessionStorage.getItem("userId"));
        params.append('campusName', name);
        params.append('level', edubg);
        params.append('profession', major);
        params.append('startString', start);
        params.append('endString', end);
        api.addEduApi(params).then(async (res) => {
          if(res.data.code === 200) {
            this.$alert("添加成功");
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.thumbUrl = res[1];
            this.modifyEduExp = false;
            this.eduExpTemp = {
              name: '',
              edubg: '',
              major: '',
              start: new Date(),
              end: new Date(),
            };
          }
        });
      }
    },

    cancelModify(type) {
      this.setInit(type);
      if (type === 0) {
        this.modifyDesireJob = false;
      }
      if (type === 1) {
        this.modifyEduExp = false;
      }
      if (type === 2) {
        this.modifyProjectExp = false;
      }
    },

    getEduName(p) {
      switch (p) {
        case '0':
          return '小学';
        case '1':
          return '初中';
        case '2':
          return '高中';
        case '3':
          return '大专';
        case '4':
          return '本科';
        case '5':
          return '研究生';
        case '6':
          return '博士'
      }
    },
    getJobStatusName(p) {
      switch (p) {
        case '0':
          return '在职-考虑机会';
        case '1':
          return '在职-月内到岗';
        case '2':
          return '离职-随时到岗';
      }
    },
    getExpName(p) {
      switch (p) {
        case '0':
          return '应届生';
        case '1':
          return '一年工作经验';
        case '2':
          return '两年工作经验';
        case '3':
          return '五年工作经验';
        case '4':
          return '十年以上工作经验';
      }
    },
    getCityName(p) {
      for(let i = 0 ; i < this.cityList.length ;i ++) {
        if(p === this.cityList[i].key) {
          return this.cityList[i].value;
        }
      }
      return p;
    },
    getJobTypeName(p) {
      for(let i = 0 ; i < this.workTypeList.length ;i ++) {
        if(p === this.workTypeList[i].key) {
          return this.workTypeList[i].value;
        }
      }
      return p;
    },
    getNewTime() {
      const params = new URLSearchParams();
      params.append('userId', sessionStorage.getItem("userId"));
      api.getNewTimeApi(params).then(async (response) => {
        this.newTime = response.data.data;
      });
    },

    uploadResume() {
      if (this.$refs.resume.files[0] !== undefined) {
        console.log(this.$refs.resume.files[0]);
        const suffix = this.$refs.resume.files[0].name.split('.').pop();
        if(/^(doc|docx|pdf)$/.test(suffix)) {
          const params = new FormData();
          params.append('file', this.$refs.resume.files[0]);
          params.append('userId', sessionStorage.getItem("userId"));
          const that = this;
          api.uploadFile(params).then(async (response) => {
            // console.log(response.data);
            that.$data.logoPic = nginx.nginxaddress + response.data.data;
            that.$data.ico = response.data.data;
            this.$alert('上传成功');
            const res = await getInfo();
            this.personInfo = {
              ...res[0],
            }
            this.thumbUrl = res[1];
          });
          this.$refs.resume.value = null;
          // this.$alert('上传成功！')
        } else {
          this.$alert('简历仅支持*.doc *.docx *.pdf格式');
          this.$refs.resume.value = null;
        }
      }
    },
  },
  components: {
    quillEditor,
    Select,
    Option,
    DatePicker,
    ImgUpload,
  },
};
</script>
<style lang="less">
@import url(../../../static/style/site.vars.less);
.resume {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  &>main {
    width: 80%;
    background: #fff;
    margin-right: 10px;
    padding: 20px 0;
    box-sizing: border-box;
    margin-bottom: 60px;
    .update-time {
      font-size: 12px;
      color: rgb(143, 143, 143);
      margin-bottom: 20px;
      padding: 0 30px;
    }
    .text-btn {
      font-size: 14px;
      float: right;
      cursor: pointer;
      transition: color .5s ease;
      user-select: none;
      text-align: right;
      position: relative;
      left: 40px;
      &:hover {
        color: @site-main;
      }
    }
    .delete {
      display: none;
      position: absolute;
      right: 18px;
      top: 0;
      padding: 10px 0;
      width: 30px;
      transition: all .5s ease;
      font-size: 14px;
      &:hover {
        color: @site-main;
      }
    }
    .title {
      padding-left: 10px;
      font-size: 16px;
      border-top: 1px solid rgba(211, 211, 211, 0.342);
      padding-top: 10px;
      position: relative;
      margin-right: 60px;
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 15px;
        border-radius: 10px;
        background-color: @site-main;
        left: 0;
        top: 13.5px;
      }
    }
    .desc {
      font-size: 14px;
      margin-bottom: 16px;
      display: flex;
      position: relative;
    }
    .personal-info {
      position: relative;
      padding: 0 30px;
      .name {
        font-size: 27px;
        margin-bottom: 20px;
        font-weight: 400;
      }
      .thumb-container {
        width: 80px;
        position: absolute;
        top: 0;
        right: 50px;
        border-radius: 80px;
        cursor: pointer;
        .thumb {
          width: 100%;
          border-radius: 100px;
        }
        .upload-layer {
          position: absolute;
          top: 0px;
          width: 80px;
          height: 80px;
          border-radius: 100px;
          &:hover {
            background-color: rgba(0, 0, 0, 0.3);
            background-image: url(../../assets/img/resume/camera.png);
            background-position: center center;
            background-size: 40px 40px;
            background-repeat: no-repeat;
          }
          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .self-intro {
      padding: 0 30px;
      .self-intro-container {
        padding: 1px 10px;
        cursor: pointer;
        margin: 13px 0;
        &>p, li {
          font-size: 14px;
          margin: 10px 0;
          color: rgb(122, 131, 138);
        }
        ul, ol {
          padding-left: 25px;
        }
        &:hover {
          background: rgba(219, 219, 219, 0.472);
          transition: all .3s ease;
        }
      }
    }
    .desire-job {
      padding-bottom: 10px;
      padding: 0 30px;
      .title {
        margin-bottom: 15px;
      }
      .desc {
        padding: 10px;
        cursor: pointer;
        margin: 0;
        position: relative;
        &:hover {
          background: rgba(219, 219, 219, 0.472);
          transition: all .3s ease;
        }
        &:hover .delete {
          display: inline;
        }
      }
    }
    .project-exp {
      padding-bottom: 10px;
      padding: 0 30px;
      .project-exp-container {
        padding-top: 15px;
        transition: all .5s ease;
        .proj {
          padding: 10px;
          cursor: pointer;
          position: relative;
          &:hover {
            background: rgba(219, 219, 219, 0.472);
            transition: all .3s ease;
            .delete {
              display: block;
            }
          }
          .proj-name {
            margin-bottom: 10px;
            color: @site-main;
          }
          .date {
            position: relative;
            top: -10px;
            font-size: 12px;
            color: rgb(143, 143, 143);
          }
          .role {
            font-size: 14px;

          }
          .proj-desc {
            margin-top: 30px;
            position: relative;
            &.content::before {
              content: '内容 :';
              position: absolute;
              top: -20px;
              font-size: 14px;
              color: @site-main;
            }
            &.result::before {
              content: '成果 :';
              position: absolute;
              top: -20px;
              font-size: 14px;
              color: @site-main;
            }
            p, li {
              font-size: 14px;
              margin: 10px 0;
              margin: 10px 0;
              color: rgb(122, 131, 138);
            }
            ul, ol {
              padding-left: 25px;
            }
          }
        }
      }
    }
    .education {
      padding-bottom: 10px;
      padding: 0 30px;
      .edu-container {
        padding-top: 15px;
        transition: all .5s ease;
        .edu {
          padding: 10px;
          cursor: pointer;
          position: relative;
          &:hover {
            background: rgba(219, 219, 219, 0.472);
            transition: all .3s ease;
          }
          &:hover .delete {
            display: block;
          }
          .edu-name {
            margin-bottom: 10px;
          }
          .date {
            position: relative;
            top: -10px;
            font-size: 12px;
            color: rgb(143, 143, 143);
          }
          .edu-desc {
            display: flex;
          }
        }
      }
    }
    .form-container {
      background: rgba(214, 214, 214, 0.171);
      padding: 30px 80px;
      width: calc(100% + 60px);
      position: relative;
      box-sizing: border-box;
      left: -30px;
      .form-title {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .checkbox-box {
        height: 35px;
        width: 45%;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #D1D1D1;
        background: #fff;
        cursor: pointer;
        &.chosen {
          color: rgb(23, 116, 223);
          border-color: rgb(78, 138, 207);
          box-shadow: 0 0 2px rgb(78, 138, 207);
        }
      }
      .editor {
        height: 200px;
        background: #fff;
        box-sizing: border-box;
        .ql-container {
          height: calc(100% - 42px);
        }
      }
      input.short {
        width: 45%;
      }
      footer {
        margin-top: 15px;
        text-align: right;
      }
      .select {
        height: 35px;
      }
      .text-container {
        &>p{
          margin-bottom: 5px;
        }
        margin-top: 20px;
        padding-right: 40px;
      }
    }
  }
  &>aside{
    width: 20%;
    height: 300px;
    .resume {
      background: #fff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .btn.primary {
        display: block;
        width: 100%;
      }
      label {
        display: block;
        width: 100%;
      }
      &>p {
        margin-bottom: 10px;
      }
      &>ul {
        margin-bottom: 10px;
        box-sizing: border-box;
        width: 100%;
        li {
          box-sizing: border-box;
          padding: 10px;
          display: flex;
          justify-content: left;
          align-items: center;
          cursor: pointer;
          width: 100%;
          .delete {
            font-size: 12px;
            display: block;
            user-select: none;
            &:hover {
              color: @site-main;
            }
          }
          &:hover {
            background: rgb(240, 240, 240)
          }
          &>img {
            margin-right: 5px;
          }
        }
      }
    }
  }
  .inline {
    display: inline-block;
    width: 1px;
    height: 20px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 13px;
  }
  .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    position: relative;
  }
  .person-state {
    background: url(../../assets/img/resume/user.png) center center no-repeat;
    background-size: 20px 20px;
    top: -1px;
  }
  .edubg {
    background: url(../../assets/img/resume/idcard.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .job-status {
    background: url(../../assets/img/resume/compass.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .tel {
    background: url(../../assets/img/resume/phone.png) center center no-repeat;
    background-size: 20px 20px;
    margin-right: 9px;
    top: -2px;
  }
  .bulb {
    background: url(../../assets/img/resume/bulb.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .salary {
    background: url(../../assets/img/resume/accountbook.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .location {
    background: url(../../assets/img/resume/location.png) center center no-repeat;
    background-size: 20px 20px;
  }
  .separator {
    position: absolute;
    left: 368px;
    top: 60px;
    user-select: none;
  }
  

  .vue-image-crop-upload {
    a {
      color: @site-main !important;
    }
    input[type=range]::-webkit-slider-thumb {
      background-color: rgba(0, 98, 211) !important;
    }
    input[type=range]::-ms-fill-lower {
      background-color: rgba(0, 98, 211, 0.3) !important;
    }
    input[type=range]::-ms-fill-upper {
      background-color: rgba(0, 98, 211, 0.15) !important;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
      background-color: rgba(0, 98, 211, 0.5) !important;
    }
    input[type=range]:focus::-moz-range-track {
      background-color: rgba(0, 98, 211, 0.5) !important;
    }
    input[type=range]:focus::-ms-fill-lower {
      background-color: rgba(0, 98, 211, 0.45) !important;
    }
    input[type=range]:focus::-ms-fill-upper {
      background-color: rgba(0, 98, 211, 0.25) !important;
    }
    input[type=range]::-webkit-slider-runnable-track {
      background-color: rgba(0, 98, 211, 0.3) !important;
    }
    input[type=range]::-moz-range-track {
      background-color: rgba(0, 98, 211, 0.3) !important;
    }
    .vicp-progress {
      background-color: rgb(0, 98, 211) !important;
      -webkit-box-shadow: 0 2px 6px 0 rgba(0, 98, 211, 0.3) !important;
              box-shadow: 0 2px 6px 0 rgba(0, 98, 211, 0.3) !important;
    }
    .vicp-progress::after {
      border: 1px solid rgba(245, 246, 247, 0.7) !important;
      -webkit-box-shadow: 0 1px 4px 0 rgba(0, 98, 211, 0.7) !important;
              box-shadow: 0 1px 4px 0 rgba(0, 98, 211, 0.7) !important;
      background-color: rgb(0, 98, 211) !important;
    }
  }
}
</style>
